<template>
    <div>
        <a-modal
         v-model:visible="visibleShow" 
         title="查看本月科室人员具体任务数量" 
         @cancel="visibleShow = false"
         width="100%"
         :footer="null"
         wrapClassName="RYRWSLModel-modal"
         >
            <div>
                <div style="height: calc(100vh - 100px);" :id="containerRYId"></div>
            </div>
        </a-modal>
    </div>
</template>
<script>
export default {
    components:{
    },
    props:{

    },
    data(){
        return{
            visibleShow:false,
            containerRYId:'gdrysl'+ new Date().getTime(),
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(list){
            //console.log(list)
            this.$nextTick(()=>{
                setTimeout(()=>{
                    this.getRYData(list)
                },200)
            })
        },
        getRYData(list){
            let dataListX = list.map(item=>{return item.index})
            var chartDom = document.getElementById(this.containerRYId);
            if(!chartDom) return false
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                legend: {
                    textStyle: {
                        fontSize: 18
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: dataListX,
                    axisLabel: { interval: 0, rotate: 0, fontSize: 18 },
                },
                yAxis: {
                    type: 'value',
                    
                },
                series: [{
                    name: '总量',
                    type: 'bar',
                    label: {
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rotate:-90
                    },
                    data: list.length?list.map(item=>{return item.data.zsl}):[]
                },{
                    name: '已办',
                    type: 'bar',
                    label: {
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rotate:-90
                    },
                    data: list.length?list.map(item=>{return item.data.ybsl}):[]
                },{
                    name: '待办',
                    type: 'bar',
                    label: {
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rotate:-90
                    },
                    data: list.length?list.map(item=>{return item.data.dbsl}):[]
                }]
            };
                option && myChart.setOption(option);
        },

    }
}
</script>
<style lang="less">
.RYRWSLModel-modal{
    .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
    height: calc(100vh - 50px);
  }
}
.quality-system-form{
    .ant-form-item-label{
        width: 80px;
        background-color: #e6f7ff;
        margin-top: 4px;
        height: 32px;
        font-weight: 600;
        line-height: 32px;
        margin-right: 5px;
    }
    .ant-form-item-control-wrapper{
        width: 200px;
    }
    .ant-upload-list{
        display: none !important;
    }
    .file-box-v{
        display: inline-block;
        // flex-direction: column;
        // align-items: center;
        // justify-content: center;
        border: 1px solid #d9d9d9;
        // width: 104px;
        // height: 104px;
        padding: 0 10px;
        overflow: hidden;
        border-radius: 2px;
    
    }
    .file-icon-v{
        font-size: 42px;
        color: rgb(24, 144, 255);
    }
    .flex-1-input-box{
            display: flex;
            width: 100%;
            .ant-form-item-control-wrapper{
            flex: 1;
        }
        .ant-form-item-control{
            width: 100%;
        }
            .ant-input{
                width: 100% !important;
            }
        }
}
</style>